<template>
	<view>
		<view class="flex align-center padding-left-xs">
			<image :src="_item.writer.avatar" style="width:35px;height:35px;border-radius: 50%;"></image>
			<view class="margin-left-sm" style="width: 100%;">
				<view class="flex justify-between text-bold text-sm">				
					<view>
						{{isUserList?'我':_item.writer.name}}
						<text class="margin-left-xs" v-if="_item.goods"> 评论 {{_item.goods.name}}</text>
					</view>
					
					<button v-if="isUserList" class="cu-btn radius sm bg-blue margin-left-sm" @tap="goDetail(_item)">
						详情
					</button>
					
				</view>
				<view class="text-sm flex justify-between">
					评分:{{_item.score}}分 发布于 {{getDateDiff(_item.createTime)}} {{_item.province?(_item.province):"未知位置"}}
				</view>
			</view>
		</view>
		
		<view class="content shadow padding-top-sm padding-left-xs">
			<richSpread :text="_item.content"></richSpread>
		</view>
		
		<view class="bg-white padding-lr-xs padding-top-sm" v-if="_item.images.length>0">
			<view :class="'grid grid-square '+(isUserList?'col-5':'col-3')">
				<view class="bg-img" @tap="ViewImage(index)" v-for="(item,index) in _item.images" :key="index" :style="[{ backgroundImage:'url(' + _item.images[index] + ')' }]"></view>
			</view>
		</view>
		
		<view class="flex justify-between margin-top-sm margin-left-xs align-center text-lg">
			<view style="width: 30%;" class="flex justify-start">
				<view v-if="!isUserList" :class="isGood?'text-red cuIcon-appreciatefill':'cuIcon-appreciate'"></view>
				<view v-else>{{good}} 赞</view>
				<text @tap="setGood" v-if="!isUserList" class="padding-left-xs text-xl">{{good==0?'抢首赞':good}}</text>
			</view>
			
			<view style="width: 50%;" v-if="item.status!==1" class="flex justify-end">
				<text class="text-red text-sm text-bold">{{item.statusStr}}</text>
				<text v-if="item.statusMsg!=''" class="text-sm text-bold">:{{item.statusMsg}}</text>
			</view>
			
			<button v-if="isUserList&&uid==item.userId" class="cu-btn radius sm bg-red" @tap="remove(_item)">
				删除
			</button>
		</view>
		
	</view>
</template>

<script>
	import richSpread from '@/components/rich/rich-spread.vue';
	import {getDateDiff} from "@/utils/date/date.js"
	import {mapGetters} from 'vuex'
	
	import * as confirm from '@/common/confirm.js'
	
	export default {
		components:{
			richSpread
		},
		data() {
			return {
				_item:{},
				good:0,
				isGood:false
			};
		},
		computed:{
			...mapGetters(['uid']),
		},
		name: 'comment-item',
		props: {
			item:{
				type:Object,
				default:{}
			},
			isUserList:{
				type:Boolean,
				default:false
			}
		},
		created() {
			this._item=this.item
			this._item.images=this.item.imageList==null?[]:this.item.imageList
			
			this.good=this._item.good
			this.isGood=this._item.isGood
		},
		methods: {
			getDateDiff(date){
				return getDateDiff(date)
			},
			ViewImage(e) {
				this.$emit("viewImage",
				{
					title:this._item.writer.name,
					avatar:this._item.writer.avatar,
					images:this._item.images,
					now:e})
			},
			goDetail(item){
				this.$emit("goDetail")
			},
			remove(item){
				let _this=this
				confirm.choose('删除该评论?',(item)=>{
					uni.showLoading({
						title:'提交中'
					})
					this.$api.post('/goods/remove_comment',{gid:item.goodsId,id:item.id}).then(res => {
						uni.hideLoading()
						uni.showToast({
							title:'删除成功',
							icon:'none'
						})
						this.$emit("remove")
					}).catch(()=>{
						uni.hideLoading()
					})
				},item)
			},
			setGood(){
				if(!this.isGood){
					this.$api.post('/goods/add_good',{gid:this._item.goodsId,cid:this._item.id}).then(res => {
						this.isGood=true
						this.good++						
					})
				}else{
					this.$api.post('/goods/remove_good',{gid:this._item.goodsId,cid:this._item.id}).then(res => {
						this.isGood=false
						this.good--
						uni.showToast({
							title:"取消点赞",
							icon:'none'
						})
					})
				}
			},
		}
	}
</script>

<style scoped>
</style>
